<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb first-bread="服务能力" last-bread="网络安全"></Breadcrumb>

    <h1 class="page-title">网络安全</h1>

    <p class="page-subtitle">全方位网络安全解决方案，保护您的数字资产安全</p>

    <div class="intro-section">
      <div class="intro-content">
        <div class="intro-text">
          <h2>网络安全概述</h2>
          <p>在数字化时代，网络安全已成为企业和个人不可忽视的重要议题。随着网络攻击手段的不断升级，网络威胁呈现出多样化、复杂化的趋势。我们的网络安全服务旨在帮助客户构建全方位的安全防护体系，抵御各类网络威胁。</p>
          <p>我们拥有一支由安全专家组成的专业团队，采用国际先进的安全技术和工具，为客户提供从风险评估、安全防护到应急响应的一站式安全服务。服务范围涵盖网络安全、数据安全、应用安全、终端安全等多个领域。</p>
          <p>平台已为金融、政府、医疗、教育等多个行业的客户提供了专业的安全服务，成功防御了数千次网络攻击，客户满意度达98%。</p>
        </div>
        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="网络安全" class="intro-image">
      </div>
    </div>

    <div class="threats-section">
      <h2 class="section-title">常见网络安全威胁</h2>
      <p>了解网络安全威胁是构建有效防护的第一步</p>

      <div class="threats-grid">
        <div class="threat-card">
          <div class="threat-icon">🦠</div>
          <h3>恶意软件</h3>
          <p>包括病毒、蠕虫、特洛伊木马、勒索软件等，能够破坏系统、窃取数据或勒索钱财。</p>
        </div>

        <div class="threat-card">
          <div class="threat-icon">📧</div>
          <h3>网络钓鱼</h3>
          <p>通过伪装成可信来源的电子邮件或网站，诱骗用户泄露敏感信息。</p>
        </div>

        <div class="threat-card">
          <div class="threat-icon">🔓</div>
          <h3>数据泄露</h3>
          <p>敏感数据被未经授权的个人或组织获取，可能导致重大经济损失和声誉损害。</p>
        </div>

        <div class="threat-card">
          <div class="threat-icon">💻</div>
          <h3>DDoS攻击</h3>
          <p>分布式拒绝服务攻击，通过大量请求使目标系统瘫痪，无法提供正常服务。</p>
        </div>

        <div class="threat-card">
          <div class="threat-icon">👤</div>
          <h3>内部威胁</h3>
          <p>来自组织内部的恶意行为或疏忽，可能导致数据泄露或系统破坏。</p>
        </div>

        <div class="threat-card">
          <div class="threat-icon">📱</div>
          <h3>移动安全威胁</h3>
          <p>针对移动设备的恶意应用、不安全的Wi-Fi连接等威胁。</p>
        </div>
      </div>
    </div>


    <div class="solutions-section">
      <h2 class="section-title">网络安全解决方案</h2>
      <p>针对不同安全威胁的专业解决方案</p>

      <div class="solution-list">
        <div class="solution-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="防火墙" class="solution-image">
          <div class="solution-content">
            <h3>边界安全防护</h3>
            <p>部署下一代防火墙、入侵防御系统(IPS)和Web应用防火墙(WAF)，构建企业网络边界安全防护体系。通过深度包检测、行为分析和威胁情报，有效防御外部网络攻击。</p>
            <p>方案特点：实时威胁检测、多层防护、智能分析</p>
            <p>适用场景：企业网络边界防护、数据中心安全防护</p>
          </div>
        </div>

        <div class="solution-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="数据加密" class="solution-image">
          <div class="solution-content">
            <h3>数据安全保护</h3>
            <p>采用加密技术、数据防泄露(DLP)和权限管理系统，保护企业核心数据资产安全。实现数据存储加密、传输加密和使用管控，防止数据泄露和滥用。</p>
            <p>方案特点：全生命周期保护、细粒度权限控制、合规审计</p>
            <p>适用场景：敏感数据保护、合规性要求高的行业</p>
          </div>
        </div>

        <div class="solution-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="终端安全" class="solution-image">
          <div class="solution-content">
            <h3>终端安全管理</h3>
            <p>部署终端检测与响应(EDR)系统，实现终端设备的统一安全管理。包括病毒防护、漏洞修复、设备管控等功能，保护终端设备免受恶意软件和攻击。</p>
            <p>方案特点：集中管理、实时防护、行为监控</p>
            <p>适用场景：企业办公终端、移动设备安全管理</p>
          </div>
        </div>
      </div>
    </div>

    <div class="services-section">
      <h2 class="section-title">安全服务</h2>
      <p>全方位的网络安全服务，满足不同安全需求</p>

      <div class="services-grid">
        <div class="service-card">
          <div class="service-icon">🔍</div>
          <h3>安全评估</h3>
          <p>全面评估企业网络安全状况，识别潜在风险和安全漏洞。</p>
        </div>

        <div class="service-card">
          <div class="service-icon">🛡️</div>
          <h3>渗透测试</h3>
          <p>模拟黑客攻击，测试系统安全防护能力，发现安全弱点。</p>
        </div>

        <div class="service-card">
          <div class="service-icon">📝</div>
          <h3>安全咨询</h3>
          <p>提供安全策略、安全架构和安全管理的专业咨询服务。</p>
        </div>

        <div class="service-card">
          <div class="service-icon">🚨</div>
          <h3>应急响应</h3>
          <p>在发生安全事件时提供快速响应和处置服务，降低损失。</p>
        </div>

        <div class="service-card">
          <div class="service-icon">🔐</div>
          <h3>安全培训</h3>
          <p>提供安全意识培训和技术培训，提升员工安全技能。</p>
        </div>

        <div class="service-card">
          <div class="service-icon">📊</div>
          <h3>安全运维</h3>
          <p>提供安全设备的日常运维和监控服务，确保安全防护持续有效。</p>
        </div>
      </div>
    </div>

    <div class="cases-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业提供了专业的网络安全服务</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="金融安全" class="case-image">
          <div class="case-content">
            <h4>某银行网络安全加固</h4>
            <p>为该银行提供全面的网络安全评估和加固服务，成功防御多次高级持续性威胁(APT)攻击。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="医疗数据" class="case-image">
          <div class="case-content">
            <h4>医院数据安全保护</h4>
            <p>为三甲医院构建数据安全防护体系，实现患者隐私数据的全方位保护。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="制造企业" class="case-image">
          <div class="case-content">
            <h4>制造企业安全防护</h4>
            <p>为制造企业部署工业控制系统安全解决方案，保障生产系统安全稳定运行。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>






    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 网络安全介绍 */
.intro-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.intro-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.intro-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 安全威胁 */
.threats-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

.threats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.threat-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.threat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.threat-icon {
  font-size: 40px;
  color: #207cca;
  margin-bottom: 20px;
}

.threat-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.threat-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
}

/* 解决方案 */
.solutions-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.solution-list {
  margin-top: 30px;
}

.solution-item {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e0e9ff;
}

.solution-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.solution-content {
  flex: 1;
}

.solution-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.solution-content p {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
}

/* 安全服务 */
.services-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.service-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  text-align: center;
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.service-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #1e5799;
}

.service-card p {
  color: #666;
  font-size: 14px;
}

/* 案例展示 */
.cases-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}


</style>